<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- 差值表达式{{  }} -->
    <!-- <h1>{{ lisi.name }}</h1>
    <h1>{{ lisi.age }}</h1>
    <h1>{{ lisi.age>18?'成年':'未成年' }}</h1>
    <h1>{{ wangwu.name }}</h1>
    <h1>{{ wangwu.age }}</h1>
    <h1>{{ wangwu.age>18?'成年':'未成年' }}</h1> -->

    <!-- <h1 v-text="word"></h1>
     -->
    <!-- <div v-text="word"></div> -->
    <!-- <div v-html="word"></div> -->

    <!-- <a v-bind:href=url>百度</a>
    <a :href=url>百度</a> -->

    <!-- 点击事件 -->
    <!-- <div>{{ merits }}</div> -->

    <!-- <button v-on:click="merits = merits + 1">点我功德加一</button>
    <button v-on:click="addMerits()">点我功德加一</button> -->

    <!-- v-on: 简写 @ -->
    <!-- <button @click="merits=merits+1">电子木鱼<span>(点我功德加一)</span></button>
    <button @click="addMerits()">电子木鱼<span>(点我功德加一)</span></button>
    <button @click="logMerits(5,$event)">点我控制台查看功德</button> -->

    <!-- 阻止默认行为 -->
    <!-- <a @click="aclick($event)" :href=url>百度</a> 
    <a @click.prevent="" :href=url>百度</a>  -->
    <!-- <a @click.prevent="onclick" :href=url>百度</a>  -->

    <!-- 键盘抬起事件 -->
    <!-- <input @keyup="fn1" type="text">
    <input @keyup.enter="fn1" type="text"> -->

    <!-- <button @click="fn2">反转世界</button> -->

    <!-- 元素显示隐藏 -->
    <!-- <button @click="show = !show">点我</button> -->
    <!--v-show 相当于操作样式 display=none/block -->
    <!-- <h1 v-show="show" v-text="word"></h1> -->
    <!-- v-id 相当于创建或删除一个节点 -->
    <!-- <h1 v-if="show" v-text="word"></h1> -->

    <!-- <button @click="ifelse = !ifelse">点我</button>
    <h2 v-if="ifelse">hey!!! Candy Andy</h2>
    <h2 v-else>who jb you</h2> -->

    <!-- <div>
      <div v-if="age > 60">广场舞</div>
      <div v-else-if="age > 40">打麻将</div>
      <div v-else-if="age > 20">蹦迪</div>
      <div v-else>唱跳rap篮球</div>
    </div> -->

    <!-- <button @click="show = !show">{{ show ? '折叠' : '展开' }}</button>
    <ul v-if="show">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul> -->

    <!-- <form @submit.prevent="onsubmit">
      <input v-model="username" type="text" name="username" />
      <input v-model="password" type="password" name="password" />
      <div><input type="checkbox" v-model="week" value="a" />1</div>
      <div><input type="checkbox" v-model="week" value="b" />2</div>
      <div><input type="checkbox" v-model="week" value="c" />3</div>
      <textarea rows="3" v-model="content"></textarea> <br />
      <input type="radio" v-model="gender" value="man" />男<br />
      <input type="radio" v-model="gender" value="woman" />女<br />
      <select v-model="city">
        <option value="gz">广州</option>
        <option value="hz">杭州</option>
       
      </select>
      <button>提交</button> 
       </form>-->
    <!-- <input type="text" v-model.number="age" />
    <br />
    <input type="text" v-model.trim="username" />
    <br />
    <input type="text" v-model.lazy="password" />
    <br /> -->

    <ul>
      <li :key="item" v-for="(item, index) in list">
        {{ index }}----{{ item }}
      </li>
    </ul>
    <ul>
      <li :key="key" v-for="(value, key) in person">
        {{ key }}----{{ value }}
      </li>
    </ul>

    <ul>
      <li :key="item" v-for="item in 18">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

export default {
  data() {
    return {
      // lisi:{
      //   name:'李四',
      //   age:25,
      // },
      // wangwu:{
      //   name:"王五",
      //   age:17,
      // },
      word: "<h1>Hey!judy</h1>",

      list: ["a", "b", "c", "d", "e"],
      person: {
        bajie: "八戒",
        wukong: "悟空",
        tangseng: "唐僧",
      },

      // url: "http://www.baidu.com",

      // merits: 100,

      // show: true,

      // ifelse: true,

      // age: 43,

      // username: "",

      // password: "",

      // week: [],

      // content: "",

      // city: "",
      // gender: "",
    };
  },
  methods: {
    // addMerits() {
    //   this.merits++;
    // },
    // logMerits(num,ev){
    //   this.merits+=num
    //   console.log(ev);
    // },
    // aclick(ev) {
    //   ev.preventDefault();
    // },
    // fn1(ev) {
    //   console.log(111);
    //   console.log(ev.target.value);
    //   ev.target.value = ``;
    // },
    // fn2() {
    //   this.word = this.word.split("").reverse().join("");
    // },
    // onsubmit() {
    //   console.log(this.username);
    //   console.log(this.password);
    //   console.log(this.week);
    //   console.log(this.content);
    //   console.log(this.gender);
    //   console.log(this.city);
    // },
  },
};
</script>

<style>
/* #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>
<style lang='less'>
div {
  h1 {
    background-color: plum;
    color: skyblue;
  }
}

span {
  font-size: 12px;
}
</style>
